<template>
  <view class="page">
    <!-- 
      :longitude="location.longitude" 
      :latitude="location.latitude" 
      这里设置的经纬度就是页面一打开显示的 中心位置
    -->
    <map class="map" :include-points="includeP" :markers="location.markers"
    @markertap="onMarkertap"></map>

    <view class="button-box">
      <button class="button" @click="go('/pages/publish/publish')">发布</button>
      <button class="button" @click="go('/pages/search/search')">搜索</button>
    </view>

  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app';
import { reactive, computed } from 'vue'


// 定位数据
const location = reactive({
  latitude: '',
  longitude: '',
  markers: [] as any[],
  includePoints: [] as any[]
})


// 计算属性 获取包含点的 位置信息  =》 和includePoints 一样使用
const includeP = computed(() => {
  return location.markers.map(item => ({
    latitude: item.latitude,
    longitude: item.longitude
  }))
})

// 定义接口
interface ITrade {
  id: number,
  openid: string,
  lat: string,
  lng: string,
  address: string,
  message: string,
  contact: number,
  type: string
}

// 获取交易列表数据
const getList = (): Promise<ITrade[]> => {
  return new Promise((resolve, reject) => {
    uni.request({
      url: 'http://localhost:3000/trades',
      method: 'GET',
      success: (res: any) => {
        resolve(res.data)
        // console.log('res1',res);        
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 获取位置信息
const getLocation = (): Promise<{
  latitude: string,
  longitude: string
}> => {
  return new Promise((resolve, reject) => {
    uni.getLocation({
      type: 'gcj02',
      success: function (res: any) {
        // console.log('res',res);
        resolve(res)
      },
      fail: (err) => {
        // console.log(err);   
        reject(err)
      }
    })
  })
}


// 生命周期 ： 监听页面加载
onLoad(async () => {

  // Promise.all()  方法可以 并行 执行所有promise请求
  // Promise.all([getList(),getLocation()]).then((respList)=>{
  //   console.log('respList',respList);     // respList可以解构
  // })   
  Promise.all([getList(), getLocation()]).then(([list, loc]) => {
    // console.log('list',list);
    // console.log('loc', loc);
    location.latitude = loc.latitude;
    location.longitude = loc.longitude;

    // 要把list的数据 =>  给markers
    location.markers = list.map((item) => ({
      id: item.id,
      latitude: item.lat,
      longitude: item.lng,
      iconPath: `../../static/icon-${item.type}.png`,
      width: 40,
      height: 40
    }));
    // console.log('location.markers',location.markers);

    //  坐标点includePoints，和markers一样 来源于list，所以可以用计算属性
    // location.includePoints = list.map(item => ({
    //   latitude:item.lat,
    //   longitude:item.lng,
    // }))

  })

  // 两个异步代码如果没有依赖关系的话，就不要去使用 await await ，串行，加载速度可能更慢
  // const resp = await getList()
  // console.log('resp',resp);
  // const location = await getLocation()
  // console.log('位置信息：',location);
})

// 方案2： navigateTo() 方法有一个 通道对象 events，
//     页面间通信接口，用于监听被打开页面发送到当前页面的数据。
const go = (goPath: string) => {
  uni.navigateTo({
    url: goPath,
    //  object.success 有一个回调函数 eventChannel 和被打开页面进行通信
    success: (res) => {
      // console.log('res', res);
      // 通过页面间的通道来监听一个 refresh事件, 在发布页触发这个事件，然后就可以刷新 获取最新数据了
      res.eventChannel.on("refresh", () => {
        // console.log('refresh');

        // 然后更新首页的数据
        getList().then((list) => {
          // console.log(list, 33333);
          // 将 list  =》 location.markers 
          location.markers = list.map((item) => ({
            id: item.id,
            latitude: item.lat,
            longitude: item.lng,
            iconPath: `../../static/icon-${item.type}.png`,
            width: 40,
            height: 40
          }));
        })
      })
    }
  })
}


// 生命周期：监听页面显示
// 方案1： 生命周期来处理地图标注显示问题。（发布一个信息之后，返回首页，首页要显示新添加的那个位置）
// onShow(async () => {
//   // 相当于重新 请求 获取数据，再渲染
//   Promise.all([getList(), getLocation]).then(([list, loc]) => {
//     console.log('respon', list, loc);

//     // 要把list的数据 =>  给markers
//     location.markers = list.map((item) => ({
//       id: item.id,
//       latitude: item.lat,
//       longitude: item.lng,
//       iconPath: `../../static/icon-${item.type}.png`,
//       width: 40,
//       height: 40
//     }));

//   })
// })


// 点击标注点
const onMarkertap = (event:any)=>{
  // console.log('点击了',event);
  //  event 里面有 markerId，就是列表数据的id
  const { markerId } =  event.detail   //解构markerId

  // 我们可以跳转到详情页面，然后显示此条信息
  uni.navigateTo({
    url:`/pages/info/info?id=${markerId}`
  })

}

</script>

<style scoped>
page,
.page {
  height: 100%;
}

.map {
  width: 100%;
  height: 100%;
}

.button-box {
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  /* 安全高度 */
  background-color: #fff;
}

.button {
  flex: 1;
}
</style>
